<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.7.1.min.js"></script>
    <script>
     function addPurchase() {
            const goodsName = $("#add_goodsName").val()
            const num = $("#add_num").val()
            const userId = $("#add_userId").val()
            let formData = new FormData();
            formData.append("goodsId", goodsName);
            formData.append("num", num);
            formData.append("userId", userId);
            $.ajax({
                url: "${pageContext.request.contextPath}/addPurchase",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/purchaseTable"
                    }
                }
            });
        }

        function deletePurchase(pId) {
            let formData = new FormData();
            formData.append("pId", pId);
            $.ajax({
                url: "${pageContext.request.contextPath}/deletePurchase",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/purchaseTable"
                    }
                }
            });
        }
    </script>
    <script>
        function search(){
            var userName = $("#search").val();
            let formData2 = new FormData();
            if(userName!==null&&userName!==''){
                formData2.append("user.userName", userName);
            }else{
                formData2.append("user.userName",'');
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/selectPurchaseBySelective",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData2,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    const purchase = data.data.purchases;
                    console.log(purchase)
                    if (data.flag === 1) {
                        let str = ''
                        purchase.forEach((uItem, uIndex) => {
                            const timestamp =purchase[uIndex].purchaseDate;
                            const date = new Date(timestamp);
                            let utcString = date.toUTCString();
                            if(timestamp===null){
                                utcString = ''
                            }
                            str += `
                                    <tr >
                                        <td>` + (uIndex+1) + `</td>
                                        <td>` + purchase[uIndex].goods.goodsName + `</td>
                                        <td>` + purchase[uIndex].goods.purchasePrice + `</td>
                                        <td>` + purchase[uIndex].num + `</td>
                                        <td>` + (purchase[uIndex].num*purchase[uIndex].goods.purchasePrice) + `</td>
                                        <td>` + utcString+ `</td>
                                        <td>` + purchase[uIndex].user.userName + `</td>
                                        <td>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteGoods('`+purchase[uIndex].goodsId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                        })
                        $('table tbody').html(str);
                    }
                }
            });
        }
    </script>
    <!-- 自定义CSS样式 -->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/assets/css/reset.css">
    <style>
        td, tr, th {
            text-align: center;
            line-height: 54px;
        }
    </style>
</head>

<body>
<div class="row shadow-none p-3 mb-5 bg-light rounded fixed-top">
    <div class="col ">
        <div class="input-group mb-3">
            <input type="text"
                   id="search"
                   class="form-control"
                   placeholder="采购员名称"
                   aria-label="Recipient's username"
                   aria-describedby="button-addon2">
            <div class="input-group-append">
                <button class="btn  btn-primary"
                        type="button"
                        id="button-addon2"
                        onclick="search()">查询
                </button>
            </div>
        </div>
    </div>
    <div class="col">
        <button type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#addUser">添加
        </button>
    </div>
</div>


<table class="table table-hover " style="margin-top: 100px;margin-bottom: 100px">
    <thead>
    <tr>
        <th scope="col">序号</th>
        <th scope="col">商品名称</th>
        <th scope="col">进价</th>
        <th scope="col">进货数量</th>
        <th scope="col">总价</th>
        <th scope="col">进货日期</th>
        <th scope="col">采购员</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="purchase2" items="${purchase2s}" varStatus="index">
        <tr>
            <th scope="row">${index.index+1}</th>
            <td>${purchase2.goods.goodsName}</td>
            <td>${purchase2.goods.purchasePrice}</td>
            <td>${purchase2.num}</td>
            <td>${purchase2.goods.purchasePrice * purchase2.num}</td>
            <td>${purchase2.purchaseDate}</td>
            <td>${purchase2.user.userName}</td>
            <td>
                <button type="button"
                        class="btn btn-danger"
                        onclick="deletePurchase(${purchase2.pId})">删除
                </button>
            </td>
        </tr>
    </c:forEach>

    </tbody>
</table>


<!-- 增加进货 -->
<div class="modal fade"
     id="addUser"
     tabindex="-1"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5"
                    id="exampleModalLabel">进货</h1>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="add_goodsName"
                           class="col-sm-2 col-form-label">商品</label>
                    <div class="col-sm-10">
                        <select class="form-select"
                                id="add_goodsName"
                                aria-label="Default select example">
                            <c:forEach var="goods" items="${goods}">
                                <option value="${goods.goodsId}">${goods.goodsName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_num"
                           class="col-sm-2 col-form-label">数量</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="add_num">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_userId"
                           class="col-sm-2 col-form-label">经手人</label>
                    <div class="col-sm-10">
                        <select class="form-select"
                                id="add_userId"
                                aria-label="Default select example">
                            <c:forEach var="purchase" items="${purchase}">
                                <option value="${purchase.userId}">${purchase.userName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">取消
                </button>
                <button type="button"
                        class="btn btn-primary"
                        onclick="addPurchase()">添加
                </button>
            </div>
        </div>
    </div>
</div>
<script>

</script>

<script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>


</body>


</html>